<template>
<div>
    <Input size="small" v-model="tagName" @on-keyup.enter.space="handleAdd" placeholder="输入回车或空格确认"/>
    <Tag v-for="item in values" :key="item" :name="item" closable @on-close="handleClose">{{ item }}</Tag>
</div>
</template>
<script lang="ts">
    export default {
        props: {
            value: {
                type: Array,
                default: () => []
            }
        },
        data () {
            return {
                values: this.value,
                tagName: ""
            }
        },
        methods: {
            handleAdd () {
                if(this.tagName.trim() != '') {
                    this.values.push(this.tagName);
                }
                this.tagName = "";
            },
            handleClose (event, name) {
                const index = this.values.indexOf(name);
                this.values.splice(index, 1);
            }
        },
        watch: {
            value() {
                this.values = this.value;
            }
        }
    }
</script>
